<template>
  <div class="basicMessage" v-if="spaceData">
    <h3>基础信息</h3>
    <n-divider class="basic-divider" />
    <div class="basic-content">
      <h4>空间名称</h4>
      <n-input placeholder="请输入空间名称" v-model:value="spaceData.space_name"/>
      <h4>空间封面</h4>
      <uploadImg :max="1" :defaultImage="'api/' + spaceData.space_image" @changeImageList="spaceImageList"/>
      <h4>空间描述</h4>
      <n-input placeholder="请输入空间描述" type="textarea" :autosize="{
        minRows: 3,
      }" v-model:value="spaceData.space_description"/>
      <h4>空间亮点</h4>
      <n-input placeholder="请输入空间亮点" type="textarea" :autosize="{
        minRows: 3,
      }" v-model:value="spaceData.space_light_description"/>
      <h4>空间亮点图片</h4>
      <div style="display: flex;flex-wrap: wrap;">
        <div v-for="item in spaceData.space_light_image" :key="item.space_id" style="position: relative;">
          <n-image height="100" :src="'api/' + item" style="margin: 0 20px 10px 0;"></n-image>
          <div class="closeImage" @click="deleteSpaceBrightImage(item)">
            <n-icon size="23" :component="CloseOutline" />
          </div>
        </div>
      </div>
      <uploadImg :max="3 - lightImageLength" @changeImageList="spaceBrightImageList"/>
      <div class="content-button">
        <n-button type="primary" @click="saveSpace">保存</n-button>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import uploadImg from '../../components/uploadImg.vue';
import {getOneSpace, UpdateSpaceMessage} from "../../api/space"
import { CloseOutline } from '@vicons/ionicons5'
import { UploadFileInfo } from 'naive-ui'
import { onMounted, ref, computed, watch } from 'vue';
import { useRouter } from "vue-router"
const router = useRouter()

const spaceData:any = ref(null)
const spaceImage = ref<string>("")
const spaceBrightImage = ref<Array<string>>([])

const spaceImageList = (fileList: Array<UploadFileInfo>) => {
  if(fileList.length > 0){
    fileList.forEach(e => {
      spaceImage.value = e.url as string
    })
  }else{
    spaceImage.value = spaceData.value.space_image
  }
}

const spaceBrightImageList = (fileList: Array<UploadFileInfo>) => {
  spaceBrightImage.value = []
  fileList.forEach(e => {
    spaceBrightImage.value.push(e.url as string)
  })
}

const saveSpace = async () => {
  spaceData.value.space_image = spaceImage.value
  // spaceData.value.space_light_image = [...spaceBrightImage.value, ...spaceData.value.space_light_image]
  const res_data = await UpdateSpaceMessage({
    space_id: spaceData.value.space_id,
    space_name: spaceData.value.space_name,
    space_image: spaceData.value.space_image,
    space_description: spaceData.value.space_description,
    spaceBright: {
      text: spaceData.value.space_light_description,
      image: [...spaceBrightImage.value, ...spaceData.value.space_light_image].join("@")
    }
  })
  if(res_data.code === "200"){
   window.$message.success(res_data.message) 
  }
  console.log(spaceData.value)
}

const deleteSpaceBrightImage = (image: string) =>{
  spaceData.value.space_light_image = spaceData.value.space_light_image.filter((e:string) => e !== image)
}

const lightImageLength = computed(
  () => spaceData.value.space_light_image.length
)

const initData = async(space_id:string) => {
  const res_data = await getOneSpace(Number(space_id))
  if(res_data.code === "200"){  
    spaceData.value = res_data.data
    spaceImage.value = spaceData.value.space_image
    if(res_data.data.phone !== localStorage.getItem("token")){
      router.push("/error")
    }
  }else{
    window.$message.error(res_data.message)
    router.push("/error")
  }
}

onMounted(() => {
  const space_id = router.currentRoute.value.params.space_id as string
  initData(space_id)
})

watch(
  () => router.currentRoute.value.params.space_id,
  (newVal) => {
    initData(newVal as string)
  }
)

</script>

<style lang='scss' scoped>
.basicMessage {
  width: 100%;
  min-height: 100%;
  padding: 0 30px;
  box-sizing: border-box;

  .basic-divider {
    margin: 0;
  }

  .basic-content {
    width: 500px;

    h4 {
      margin-bottom: 10px;
    }
    .content-button{
      margin: 20px 0;
    }
    .closeImage{
      height: 23px;
      position: absolute;
      right: 10px;
      top: -10px;
      cursor: pointer;
      border-radius: 50%;
      box-sizing: border-box;
    }
    .closeImage:hover{
      color: rgb(240, 116, 116);
      background-color: rgb(194, 193, 193);
    }
  }
}
</style>